<!--  -->
<template>
  <div class="index container">
    <div class="topBox">
      <el-input
        size="medium"
        v-model="projectInfo"
        placeholder="请输入内容"
        class="projectInfoInput topInput"
      ></el-input>
      <el-button type="primary" size="medium" icon="el-icon-search">搜索</el-button>
    </div>
    <div class="contain">
      <el-table :data="tableData" style="width: 100%" @expand-change="exChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="childTabOperateBox">
              <el-button type="primary" @click="editPerformace('编辑绩效',props.row.project_id)">编辑绩效</el-button>
            </div>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-table :data="expandTab['row'+props.row.project_id]" style="width: 100%">
                <el-table-column align="center" prop="type" label="种类" width="180"></el-table-column>
                <el-table-column align="center" prop="nickname" label="姓名" width="180"></el-table-column>
                <el-table-column align="center" prop="performance" label="绩效"></el-table-column>
                <el-table-column align="center" prop="num" label="实际数字"></el-table-column>
              </el-table>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="project_id" label="项目ID" width="80"></el-table-column>
        <el-table-column prop="title" label="项目名称" width="120"></el-table-column>
        <el-table-column prop="introduce" label="项目介绍"></el-table-column>
        <el-table-column prop="head_user" label="项目负责人" width="120"></el-table-column>
        <el-table-column prop="start_date" label="开始时间" width="120"></el-table-column>
        <el-table-column prop="end_date" label="结束时间" width="120"></el-table-column>
        <el-table-column prop="total_number" label="总金额" width="120"></el-table-column>
      </el-table>
      <el-dialog :title="diagName" :visible.sync="dialogFormVisible" class="diagForm">

        <el-form :model="performance">
          <el-form-item label="绩效规则" :label-width="formLabelWidth">
            <el-select v-model="performance.type" clearable filterable placeholder="请选择">
              <el-option label="比例" value="1"></el-option>
              <el-option label="数目" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            v-for="(item1,index) in performance.list"
            :key="index"
            style="margin-left:20px;"
          >

            <el-select v-model="item1.user_id" clearable filterable placeholder="请选择">
              <el-option
                v-for="(item,index) in userList"
                :key="index"
                :label="item.nickname"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-input v-model="item1.performance" autocomplete="off" type="number" style="width:100px;"></el-input>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="deletePerformanceItem(index)"
            ></el-button>
          </el-form-item>
          <el-button
            type="primary"
            size="medium"
            style="margin-left:120px;"
            @click="addPerformanceItem()"
          >增加新的绩效系数
          </el-button>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="performanceSaveFn()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
  import {
    getPrjList,
    getUserList,
    getIndexData,
    deletePrj,
    projectSave,
    getPrjPerformance,
    performanceSave
  } from "@/api/api.js";
  import {getAllUser} from "@/api/api";
  // import { async } from "q";
  export default {
    components: {},
    data() {
      return {
        expands: [],
        getRowKeys(row) {
          return row.id;
        },
        projectInfo: "",
        tableData: null,
        dialogFormVisible: false,
        dataRange: ["", ""],
        pagination: {
          page: 1,
          size: 10
        },
        userParams: {
          page: 1,
          size: 10
        },
        expandTab: {},
        diagForm: {
          project_id: "",
          title: "",
          serial: "",
          decree: "",
          introduce: "",
          start_date: "",
          end_date: "",
          total_number: 0,
          head_user_id: ""
        },
        diagFormdisabled: true,
        formLabelWidth: "80px",
        userList: null,
        diagName: "提示",
        performance: {
          project_id: "",
          type: null,
          list: []
        }
      };
    },
    computed: {},
    watch: {},
    created() {
      this.getPrjListFn();
      // // this.getIndexDataFn();
      this.getUserListFn();
    },
    mounted() {
    },
    methods: {
      async getPrjListFn() {
        let data = await getPrjList(this.pagination);
        if (data.data.code === 200) {
          this.tableData = data.data.data.list;
        }
      },
      async getUserListFn() {
        let data = await getAllUser(this.userParams);
        if (data.data.code === 200) {
          this.userList = data.data.data.list;
        }
      },
      exChange(row, rowList) {
        console.log(row.project_id);
        this.getPrjPerformanceFn(row.project_id);
      },
      async getPrjPerformanceFn(id) {
        let params = {
          project_id: id
        };
        let data = await getPrjPerformance(params);
        console.log(data);
        if (data.data.data === "success") {
          this.expandTab['row' + id] = []
        } else {
          this.expandTab['row' + id] = data.data.data;
        }
        console.log(this.expandTab)
      },
      diagShow() {
        this.dialogFormVisible = true;
      },
      async editPerformace(title, id) {
        this.diagShow();
        this.diagName = title;
        console.log(id);
        this.performance['project_id'] = id;
        let param = {
          project_id: id
        };
        let data = await getPrjPerformance(param);
        console.log(data)
        console.log(data.data.data)
        let performance_list = data.data.data;
        let tempList;
        tempList = []
        if (performance_list.length > 0 && performance_list !== "success") {
          this.performance.type = performance_list[0].type
          for (let i = 0; i < performance_list.length; i++) {
            tempList.push({
              type: performance_list[i].type,
              user_id: performance_list[i].type,
              user_name: performance_list[i].nickname,
              performance: performance_list[i].performance
            })
          }
        }
        this.performance.list = tempList
      },
      addPerformanceItem() {
        this.performance.list.push({user_id: null, performance: 0});

      },
      async performanceSaveFn() {
        this.performance.type = parseInt(this.performance.type)
        var params = {};
        params['project_id'] = this.performance.project_id;
        params['type'] = parseInt(this.performance.type);
        var list = [];
        for (var i = 0; i < this.performance.list.length; i++) {
          var json = {};
          json['user_id'] = this.performance.list[i].user_id;
          json['performance'] = parseFloat(this.performance.list[i].performance)
          list.push(json)
        }
        params['list'] = list;
        let data = await performanceSave(params);
        if (data.data.code === 200) {
          this.$message({
            type: "success",
            message: "录入成功"
          });
          this.dialogFormVisible = false
        } else {
          this.$message.error("录入失败");
        }
        console.log(data)
      },
      deletePerformanceItem(index) {
        this.performance.list.splice(index, 1);
      },
      showContent(content) {
        console.log(content)
      }
    }
  }
  ;
</script>
<style scoped lang="scss">
  .topBox {
    padding: 10px 0;
    width: calc(100% - 10px);
    margin: auto;
    border-bottom: solid 1px #e6e6e6;

    .topInput {
      width: 200px;
    }
  }

  .diagForm {
    .el-form-item {
      width: 450px;
    }

    .el-input {
      width: 350px;
    }
  }
</style>
